<script>
import CustomDialog from '@/components/CustomDialog/CustomDialog.vue'
import IFrame from '@/components/Iframe/index.vue'
import setting from '@/settings'
export default {
  name: 'DefaultEntityIndex',
  components: { CustomDialog, IFrame },
  data() {
    return {
      title: '', // 弹框标题
      isOpen: false, // 是否打开
      ifFull: false, // 是否全屏
      top: '60px', // 距离顶部高度
      data: {},
      query: [],
      loading: false,
      type: 0, // 详情页打开方式
      url: '', // 详情地址
      set: setting,
      templateName: null // 详情模版
    }
  },
  created() {
    this.$bus.on('openEntity', this.open)
  },
  methods: {
    /**
     *  详情页打开方式
     * @param data 详情页相关设置信息
     */
    open(data) {
      console.log(data)
      this.data = data
      // 详情页标题
      this.title = data.data.title
      // 详情页打开方式
      this.type = data.data.openType
      if (data.data.isOpenEntity) { // 是否打开详情页
        if (data.data.openType === 1) { // 直接打开地址
          this.url = data.data.entity[data.data.url]
          // setting.isIframe 是否支持Iframe 方式打开
          if (setting.isIframe === false) {
            window.open(this.url, setting.openType)
          } else {
            this.isOpen = true
          }
        }
        if (data.data.openType === 2) { // 打开方式为地址参数
          if (data.data.params.length > 0) {
            let url = data.data.url
            // 参数解析
            data.data.params.forEach(item => {
              url = url.replace(
                new RegExp('\\$\\{([\\s]*?)(' + item.code + '{1})([\\s]*?)([^}])*\\}'),
                data.data.entity[item.column]
              )
            })
            this.url = url
            // 非iframe 方式打开，取setting.openType 控制弹窗方式
            if (setting.isIframe === false) {
              window.open(this.url, setting.openType)
            } else {
              this.isOpen = true
            }
          }
        }
        if (data.data.openType === 3) { // 打开方式为模版方式打开
          this.query = []
          if (data.data.entityParams && data.data.entityParams.length > 0) {
            data.data.entityParams.forEach(item => {
              const entity = { code: item.code, value: data.data.entity[item.value] }
              this.query.push(entity)
            })
          }
          const path = '/' + data.data.temp.ssdl + '/' + data.data.temp.mbmc
          this.templateName = () => import(`@/template/entityTemp${path}`)
          this.isOpen = true
        }
      }
    },
    close() {
      this.type = 0
      this.isOpen = false
    }
  }
}
</script>
<template>
  <custom-dialog
    :title="title"
    :visible.sync="isOpen"
    :fullscreen="ifFull"
    :top="top"
    :before-close="close"
    append-to-body
  >
    <div slot="title" style="font-weight: bold">
      {{ title }}
    </div>
    <div v-loading="loading" class="custom-dialog-body">
      <i-frame v-if="(type === 1 || type === 2) && set.isIframe === true" :src="url" />
      <component
        :is="templateName"
        v-if="templateName && type === 3"
        :show-header="true"
        :temp="data.data.temp"
        :entity="data.data.entity"
        :params="query"
      />
    </div>
  </custom-dialog>
</template>

<style lang="scss" scoped>
.custom-dialog-body {
  width: 100%;
  height: 100%;
}
</style>
